<!--
    获取DOM元素 - 使用 ref(null) 生成一个 ref 对象，在标签中通过 ref 属性绑定。可以获取DOM，也可以获取组件
    默认在其他组件中的属性和方法是不对外开放的；
    如果想要通过这种方式获取组件中的属性和方法，
    需要在组件中使用 defineExpose() 将属性和方法暴露出去
-->
<script setup>
import TestCom from "@/components/TestCom.vue";
import {onMounted, ref} from "vue";

// 模板引用（可以获取DOM，也可以获取组件）
// 1.调用 ref() 生成 ref 对象
// 2.通过 ref 标识进行绑定
// 3.通过 ref对象.value 即可访问到绑定的元素（必须渲染完成后）

const inp = ref(null);
// 因为写在 setup 中的对应的是生命周期中的 create 阶段，所以此时是获取不到的
// console.log(inp.value)
// 需要挂载完毕才能获取的到
onMounted(() => {
    console.log(inp.value)
    inp.value.focus()
})
const clickFn = () => {
    inp.value.focus()
}

// --------------------------
const testRef = ref(null)
const getCom = () => {
    console.log(testRef.value)
    console.log(testRef.value.count)
    testRef.value.sayHi()
}
</script>

<template>
    <h3 style="text-align: center;">Vue3-Study</h3>
    <hr>
    <div>
        <input ref="inp" type="text">
        <button @click="clickFn">点击聚焦输入框</button>
    </div>
    <TestCom ref="testRef"/>
    <button @click="getCom">获取组件</button>
</template>